<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap_md.css"/>


    <title>文章</title>
</head>


<body>



<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">导航栏</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.jsp">主页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="edit.html">添加文章</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
    </div>
</nav>
      <div class="jumbotron" style="display: inline-flex;width: 100%;">
        <div class="jumbotron" style="width: 25%;margin: 0 auto 0 0;height: auto;">
        




            <h1 class="display-3">目录</h1>
            
            <div id="list" class="list-group" style="height: auto;">

              </div>
        </div>
        <div class="jumbotron" style="width: 75%;margin: 0 0 0 auto;">
            
    
    
    
    
            <h1  id="title" class="display-3">文章标题</h1>
            <div id="result">文章内容</div>

        </div>
      </div>
      

    
 </body>
<script>
   function getContext(id) {
       $.ajax({
           type:"post",
           url:"showArticle",
           data:{id:id},
           dataType:'json',
           success:function (data) {
               console.log(data);
               md= data.context;
               var html = marked(data.context);
               $("#title").empty();
               $("#title").append(data.title);
               $("#result").empty();
               $("#result").append(html);
           }
       });
   }
   function getTitle() {
       $.ajax({
           type:"post",
           url:"getTitle",
           //data:{id:5},
           dataType:'json',
           success:function (data) {
               console.log(data);
               $("#list").empty();
               $.each(data,function (index,context) {
                   //$("#list").append(" <a href='getContext("+context[0]+");' class='list-group-item list-group-item-action active'>"+context+"</a>" );
                    $("#list").append(" <button class='btn btn-primary btn-lg btn-block' onclick='getContext("+context[0]+")'>"+context[1]+"</button>")
               })

           }
       });
   }


    getTitle()
</script>
</html>